
<style lang="stylus" scoped>
.order-box {
  background: #fff;
  width: 100%;
  margin: 0 auto;
  position: relative;

}

.order-box-sel {
  box-sizing: border-box;
  padding: 15px 0 23px 0;
  position relative

}
.order-box > i {
  position absolute;
  bottom 0;
  width 90%;
  height 1px;
  margin 0 auto;
  left 5%;
  background rgba(219,219,219,1);
}

.order-content__item {
  position: relative;
}

.order-content__item img, .order-service__item img {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  margin-bottom: 8px;
}

.order-content__item>font {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 1px solid #eba645;
  color: #eba645;
  right: 20%;
  top: -6px;
  font-size: 10px;
  text-align: center;
  line-height: 15px;
  border-radius: 50%;
}

.order-service__item {
  width: 25%;
  height: auto;
  padding-bottom: 34px;
}

.container-order {
  width: 100%;
  height: 3.5rem;
  background: white;
  display: block;
  margin-bottom: 0.15rem;
  margin-top: 0.15rem;
  font-size: 0.35rem;

  .container-order-1 {
    height: 1.5rem;
    line-height: 1.5rem;
    margin-left: 0.5rem;
    font-size: 0.4rem;
  }

  .container-order-2 {
    width: 100%;
    height: 1.5rem;

    p {
      width: 25%;
      margin-top: 0.3rem;

      img {
        width: 0.8rem;
        height: 0.8rem;
        margin: auto;
      }

      span {
        text-align: center;
        padding-top: 0.3rem;
      }
    }
  }
}

/* .t{
    background-image url('/static/img/t.png');
} */
.container {
  width: 100%;
  height: 5rem;
  position: absolute;

  .container-main{
    position: relative;
    background-color: #fff;
    .container-bj {
      width: 100%;
      height: 110px;
      background: url('/static/themes/user/head_bg_back@2x.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 0;
    }


    span {
      color: #000;
      font-size: 27px;
    }

    p {
      font-size: 0.35rem;
      color: #000;
    }

    /* 用户信息 */
    .userInfo {
      text-align: center;
      margin-bottom: 1rem;
      .nickname {
        font-size: 16px;
        padding: 0.2rem 0;
        text-align: center;
        color: #000;
      }
    }
  }

  .container-integral {
    width: 93%;
    height: 2rem;
    background: #ffffff;
    margin: 0px auto 0;
    border-radius: 6px;
    position: absolute;
    left: 13px;
    top: -26px;
    box-shadow: 0px 3px 33px 2px rgba(205, 205, 205, 0.41);

    p {
      width: 33%;
      height: 100%;
      font-size: 0.36rem;
      line-height: 0.6rem;
      font-weight: 500;
      text-align: center;

      span {
        display: block;
      }
    }
  }
}

.loading {
  position: fixed;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
}

.set {
  position: absolute;
  right: 14px;
  top: 14px;
  color: #fff;
  width: 22px;
  height: 22px;
}

.set img {
  width: 22px !important;
  height: 22px !important;
}

.ajackBox {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-size: 100% 100%;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  img {
    border-radius: 50%;
  }
}

.level {
  padding: 0 12px;
  height: 22px;
  background #E9725D;
  vertical-align: middle;
  font-size: 12px !important;
  line-height: 22px;
  font-weight:bold;
  color: #fff !important;
  border-radius: 12px;
}
.level > i {
  width:12px;
  height 10px;
  display inline-block;
  background: url('/static/new/ymx/mine_icon_masonry@2x.png') center center no-repeat;
  background-size: 100% 100%;
  margin-right 5px;
}

.infoBox {
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  padding-top: 21px;
  padding-bottom: 70px;
}

.line {
  width: 100%;
  height: 5px;
  border-bottom: none;
  background: rgba(237, 237, 237, 1);
}

.order-box_tit {
  width: 100%;
  height: 40px;
  line-height: 45px;
  position: relative;
  color #141712;
  font-size: 16px;
  padding-left 20px;

}
.but-sign{
  position: absolute;
  top: 0;
  right: 0;
  width: 2.6rem;
}
.order-box_tit > span {
  content: '';
  width: 24px;
  height: 24px;
  display: inline-block;
  background: url('/static/ethel_img/my_icon_aw@2x.png') center center no-repeat;
  background-size: 100% 100%;
  vertical-align: middle;
  position: absolute;
  right: 0px;
  top: 10px;
}

.userInfo {
  width: 100%;
  margin-top: 55px;
}

.proTit {
  padding-top: 20px;
}

.proTit > span {
  color: #FFF !important;
}

.proTit > span:first-child {
  font-size: 23px;
}

.proTit > span:last-child {
  font-size: 14px;
}

.adv-box {
  width: 100%;
  height: 90px;
  padding: 0 15px;
  margin: 20px 0;
  display: block;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.service-box {
  width: 100%;
  height: auto;
  margin-top: .4rem;
  .ser-line {
    width: 100%;
    height: auto;
    > p {
      width: 100%;
      height: 45px;
      line-height: 45px;
      color: #141712;
      padding-left 20px;
      font-size: 19px;
      font-weight: 400;
      position relative

    }
  }

  .sel {
    box-sizing: border-box;
    padding: 15px 0 23px 0;
  }
  .order-service__item {
      width: 25%;
      height: auto;
      padding-bottom: 18px;
      border-right: 1px solid rgba(236,236,236,1);

      img {
        width: 45px;
        height: 45px;
        display: block;
        margin-bottom: 8px;
      }
      span {
        font-size: 12px;
        color:rgba(51,51,51,1);
      }
  }
  .border-top {
 border-top: 1px solid rgba(236,236,236,1);
 padding-top: 12px;
  }
}
.headimg .ajackBox{
  border: .18rem solid rgba(255,255,255,.5);
}
.name-tit {
  font-size: 27px !important;
  margin-bottom 5px;
}
.name-val {
  font-size: 14px !important;
}
._item {
  position relative;
}
._item > i {
  right 0;
  width 2px;
  height 30px;
  position absolute;
  top: 50%;
  margin-top -15px;
  background: url('/static/new/ymx/mine_img_line@2x.png') center center no-repeat;
  background-size: 100% 100%;
}
._item:last-child > i {
  width 0;
  height 0;
}
.name-val em{
  display: inline-block;
  width: 18px;
  img{
    vertical-align: bottom;
  }
}
</style>
<template>
  <div class="container">
    <!-- 个人信息 -->
    <div class="container-main flex-display flex-display-column">
      <div class="container-bj">

      </div>
      <div class="userInfo flex-display flex-center-pack flex-display-column flex-center-align" v-if="userInfo">
        <div class="animated jackInTheBox headimg">
          <div class="ajackBox">
            <img class="max" :src="userInfo.headimgurl" />
          </div>
        </div>
        <div class="flex-display flex-display-column">
          <span class="nickname">{{userInfo.nickname}}</span>
          <span class="level flex-display flex-center-align flex-center-pack"><i></i>{{userInfo.level}}</span>
        </div>

      </div>
      <ul class="flex-num-one flex-display">
        <li

          class="flex-num-one flex-display flex-center-align flex-display-column  flex-center-pack _item"
          v-for="(item,idx) in qianbao"
          :key="idx"
          @click="tiaozhuanqianbao(idx)"
        >
        <i></i>
          <span class="name-tit">{{item.msg1}}</span>
          <span class="name-val"> <em> <img class="max" :src="item.icon"> </em> {{item.msg2}}</span>
        </li>
      </ul>
    </div>
    <div class="infoBox">
      <a>
        <img class="max" src="static/themes/user/home_banner@2x.png" />
      </a>
      <div class="order-box flex-display flex-display-column">
        <div class="order-box_tit">
          我的订单
        </div>
        <ul class="order-box-sel flex-display flex-row-between">
          <li
            class="order-content__item flex-display flex-display-column flex-num-one flex-center-align"
            v-for="(item, index) in AorderList"
            :key="index"
            @click="fnOpenNewOrder(item.id)"
          >
            <img :src="item.img" />
            <span class="theme-color f-12">{{item.name}}</span>
            <font id="f-dot" v-if="item.num">{{item.num}}</font>
          </li>
        </ul>
        <i></i>
      </div>
      <div class="service-box">
        <div class="ser-line">
          <div class="order-box_tit">我的服务</div>
          <ul class="sel flex-display  flex-warp">
            <li
              @click="fnOpenPage(item.path)"
              :class="{'border-top': index  >3}"
              class="order-service__item flex-display flex-display-column flex-center-align"
              v-for="(item, index) in gongneng"
              :key="index" >
              <img :src="item.url"/>
              <span>{{item.title}}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- <gongNeng :cell_data="gongneng"/> -->
      <!-- <img src="/static/img/set.png" > -->
    </div>
  </div>
</template>

<script>
import api from "@/fetch/api";
import gongNeng from "@/base/cell/gongneng_model";
import Loading from "@/base/loading/loading";
import { Indicator, Button, MessageBox } from "mint-ui";
export default {
  name: "Mycontainer",
  data() {
    return {
      AorderList: [
        {
          id: 0,
          img: "/static/themes/order/my_order_icon_obligation@2x.png",
          name: "待付款",
          num: 0
        },
        {
          id: 1,
          img: "/static/themes/order/my_order_icon_goods@2x.png",
          name: "待发货",
          num: 0
        },
        {
          id: 2,
          img: "/static/themes/order/my_order_icon_delivery @2x.png",
          name: "待收货",
          num: 0
        },
        {
          id: 3,
          img: "/static/themes/order/my_order_icon_estimate@2x.png",
          name: "待评价",
          num: 0
        },
        {
          id: "all",
          img: "/static/themes/order/my_order_icon_all@2x.png",
          name: "全部订单",
          num: 0
        }
      ],
      qianbao: [
        {
          msg1: 0,
          msg2: "优惠券",
          icon: "/static/themes/user/icon_coupon@2x.png"
        },
        {
          msg1: "0.00",
          msg2: "余额",
          icon: "/static/themes/user/icon_balance@2x.png"
        },
        {
          msg1: 0,
          msg2: "积分",
          icon: "/static/themes/user/icon_integral@2x.png"
        }
      ],
      gongneng: [
        {
          path: "/shouzhi",
          url: "/static/themes/service/my_icon_detail@2x.png",
          title: "收支明细"
        },
        {
          path: "/NewShop",
          url: "/static/themes/service/my_icon_cart@2x.png",
          title: "购物车"
        },

        {
          path: "/entry/register",
          url: "/static/themes/service/my_icon_phone@2x.png",
          title: "绑定手机"
        },
        {
          path: "/number",
          url: "/static/themes/service/my_icon_popularize@2x.png",
          title: "推广"
        },
        {
          path: "/NewTeam",
          url: "/static/themes/service/my_icon_pop.png",
          title: "团队"
        },
        {
          path: "/modules/address",
          url: "/static/themes/service/my_icon_address@2x.png",
          title: "收货地址"
        },
        {
          path: "/PaymentPassword",
          url: "/static/themes/service/my_icon_password@2x.png",
          title: "支付密码"
        },
        {
          path: "/bindzfb",
          url: "/static/themes/service/my_icon_alipay@2x.png",
          title: "绑定支付宝"
        },

      ],
      my: [],
      userInfo: null,
      myBalance: null,
      isHasMore: false
    };
  },
  components: {
    gongNeng,
    Indicator,
    Loading,
    Button,
    MessageBox
    // shouzhi,
  },
  created() {
    Indicator.open({
      text: "加载中...",
      spinnerType: "fading-circle"
    });

    //获取缓存的用户信息
    this.ethelWxUserInfo = this.getlocalStorage(this.companyUnique);

    if (this.ethelWxUserInfo) {
      this.getOrderNum();
      this.userInfo = this.ethelWxUserInfo;
    }

    console.log(this.ethelWxUserInfo.yjbalance);
    const params = {
      uid: this.getUId()
    };
    this.fnGetUsrInfo(params)
    api
      .getMyBalance(params)
      .then(result => {
        Indicator.close();
      })
      .catch(error => {
        this.isHasMore = true;
        if(error.data.data){
          this.qianbao[1].msg1 = error.data.data.balance;
        }

        Indicator.close();
      });

    //   this.qianbao[1].msg1 = this.ethelWxUserInfo.yjbalance  ? this.ethelWxUserInfo.yjbalance : "0.00"
  },
  computed: {},
  mounted() {
    this.getBalance();
  },
  methods: {
    // 获取用户信息
    fnGetUsrInfo(_params) {
      api.newuserinfo(_params).catch(result => {
        console.log(result)
        if(result.status == 200) {
          this.userInfo = result.data
          this.ethelWxUserInfo = result.data
          this.setlocalStorage(this.companyUnique, result.data);
        }
      })
    },
    /**
     * @desc 打开相应页面
     * @param {String} _path 路由的地址
     */
    fnOpenPage(_path) {
      this.$router.push({
        path: _path
      })
    },
    // 跳设置页面
    fnToSet() {
      this.$router.push({
        path: "setting"
      });
    },
    getOrderNum() {
      let params = {
        is_count: "yes",
        uid: this.ethelWxUserInfo.id
      };
      api
        .getOrderNum(params)
        .catch(res => {
          console.log(res);
          if (res.status == 200 && res.data.data) {
            this.AorderList.forEach((element, index) => {
              element.num =
                index == 4 ? res.data.data["all"] : res.data.data[index];
            });
          }
          console.log("数量");
        })
        .then(err => {
          console.log(err);
        });
    },
    /**
     * @author yang
     * @param {Number} _id 选择的订单类型
     */
    fnOpenNewOrder(_id) {
      this.$router.push({
        path: "NewOrder",
        query: {
          status: _id
        }
      });
    },
    hs() {
      this.$router.push("/set");
    },

    goOrderPage(id) {
      this.$router.push({
        path: "/order",
        query: {
          index: id
        }
      });
    },
    //获取用户金额
    getBalance() {
      // const params = {
      //   username: this.getUserId()
      // };
      const params = {
        uid: this.getUId()
      };
      api
        .getMyBalance(params)
        .then(result => {
          Indicator.close();
        })
        .catch(error => {
          this.print(error);
          Indicator.close();
          if(error.data.data){
            this.myBalance = error.data.data.balance;
          }

        });
    },
    //   点击余额，跳转钱包
    tiaozhuanqianbao(idx) {
      if (idx != 1) {
        return;
      }
      console.log(999);
      let user = this.getlocalStorage(this.companyUnique);
      if (!user.is_bind_phone) {
        this.$router.push("/entry/register");
        return;
      }
      this.$router.push("/modules/moneybag");
    }
  }
};
</script>
<!-- http://api.sailafeinav.com/user/v1/wxcode/ -->
